/* eslint-disable import/first */
import { View, Text, Input, Checkbox, Image } from "@tarojs/components";
import Taro, { useLoad } from "@tarojs/taro";
import "./index.less";
import React, { useState } from "react";
import { Icon, Dialog } from "@antmjs/vantui";
import IconFont from "@/components/iconfont";

const Singin: React.FC = () => {
  useLoad(() => {
    console.log("Page loaded");
  });

  const [loginForm, setLoginForm] = useState({
    userAccount: "",
    password: "",
  });

  const [qqTextIsShow, setQqTextIsShow] = useState(false);

  const qqOptions = [
    { label: "全国用户", qq: "289443573" },
    { label: "江门流通", qq: "929582138" },
    { label: "江门餐饮", qq: "825598181" },
    { label: "江门生产", qq: "475404862" },
  ];

  const [forgetPwdShow, setForgetPwdShow] = useState(false);
  return (
    /*eslint jsx-quotes: 0*/
    <View className="w-[100vw] h-[100vh] flex flex-col">
      <View className="h-[160px] flex px-6 items-center">
        <IconFont name="home" size={40} />
      </View>
      <View className="flex flex-col justify-center flex-1 gap-6 px-6">
        <View className="flex flex-col gap-3">
          <Text className=" font-bold text-[40px] lett">登录</Text>
          <View className="flex">
            <Text>没有账号?</Text>
            <Text
              className=" text-[#1677FF]"
              onClick={() => {
                Taro.navigateTo({
                  url: "/pages/Auth/Register/index",
                });
              }}
            >
              立即注册
            </Text>
          </View>
        </View>

        <View>
          <View className="h-[80px] leading-[80px] border-b border-solid border-gray-300">
            <Input
              className="h-full"
              name="userAccount"
              type="text"
              placeholder="请输入手机号/许可证号"
              onInput={(e) => {
                console.log(e);
              }}
            />
          </View>
          <View className="h-[80px] leading-[80px] border-b border-solid border-gray-300">
            <Input
              className="h-full"
              name="password"
              type="safe-password"
              placeholder="输入登录密码"
            />
          </View>
        </View>

        <View className="flex justify-between w-full text-[26px] px-4">
          <Checkbox value="记住账号密码">记住账号密码</Checkbox>
          <Text
            className=" text-[#1677FF]"
            onClick={() => {
              setForgetPwdShow(true);
            }}
          >
            忘记密码
          </Text>
        </View>

        <View className="flex w-full flex-nowrap text-[26px] items-center px-4">
          <Checkbox value="agree"></Checkbox>
          <Text>我已认真阅读并同意</Text>
          <Text
            className=" text-[#1677FF]"
            onClick={() => {
              Taro.navigateTo({
                url: "/pages/Auth/PrivacyPolicy/index",
              });
            }}
          >
            隐私政策
          </Text>
          <Text>和</Text>
          <Text
            className=" text-[#1677FF]"
            onClick={() => {
              Taro.navigateTo({
                url: "/pages/Auth/UserServiceAgreement/index",
              });
            }}
          >
            用户服务协议
          </Text>
        </View>

        <View className="flex justify-center text-gray-400">
          <Text>没有账号? 先逛逛</Text>
          <Icon name="arrow" size="36"></Icon>
        </View>

        <Text
          className="w-full text-center text-gray-400"
          onClick={() => setQqTextIsShow(true)}
        >
          用户报备问题，请加qq群（点击获取）
        </Text>

        <Text
          className="h-[90px] w-full rounded bg-[#1677FF] flex justify-center items-center text-white"
          onClick={() => {
            console.log("登录");
            Taro.switchTab({
              url: "/pages/Home/index",
            });
          }}
        >
          登录
        </Text>
      </View>

      <Text className="w-full h-[80px] text-center">
        技术支持由北京信睿浩扬科技有限公司提供
      </Text>

      {/*  用户报备问题，请加qq群（点击获取）弹窗 */}
      <Dialog
        title=""
        showCancelButton={false}
        showConfirmButton={false}
        show={qqTextIsShow}
        onClose={() => setQqTextIsShow(false)}
        width="80%"
      >
        <View className="text-[32px]">
          <Text className=" h-[80px] w-full flex items-center justify-center">
            用户报备问题，请加qq群
          </Text>

          <View className="text-[24px] text-gray-400">
            {qqOptions.map((_item, _index) => (
              <View
                key={_index}
                className="w-full h-[56px] flex justify-center mb-1 items-center"
              >
                <View className="w-[18px] h-[18px] bg-[#333] rounded-[24px] mr-1"></View>
                <Text className="text-[#666]">{`${_item.label}: ${_item.qq}`}</Text>
              </View>
            ))}
          </View>

          <Text
            className=" h-[80px] flex items-center justify-center text-[#54849b]"
            onClick={() => setQqTextIsShow(false)}
          >
            确认
          </Text>
        </View>
      </Dialog>

      {/* 忘记密码弹窗 */}
      <Dialog
        title=""
        showCancelButton={false}
        showConfirmButton={false}
        show={forgetPwdShow}
        onClose={() => setForgetPwdShow(false)}
        width="80%"
      >
        <View className="text-[32px] p-2">
          <View className="w-full text-center">
            <Text>
              请扫码添加客服微信，发送您的账号信息，我们将为您进行密码重置
            </Text>
          </View>
          <View className="flex items-center justify-center w-full p-4">
            <Image
              style="width: 100px;height: 100px;background: #fff;"
              src="https://camo.githubusercontent.com/3e1b76e514b895760055987f164ce6c95935a3aa/687474703a2f2f73746f726167652e333630627579696d672e636f6d2f6d74642f686f6d652f6c6f676f2d3278313531333833373932363730372e706e67"
            />
          </View>
          <Text
            className=" h-[80px] flex items-center justify-center text-[#54849b]"
            onClick={() => setForgetPwdShow(false)}
          >
            确认
          </Text>
        </View>
      </Dialog>
    </View>
  );
};

export default Singin;
